<?php
header("content-type:text/html;charset=utf-8");
include "../../public/config/config.php";
include "../../public/include/funcs.php";
$link=conn($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd,$cfg_dbname,$cfg_dbchar);
$date = date("Ymd");
$arr = select($link, 'diy_hc', "date=".$date);
if(!$arr){
	$re = add($link, 'diy_hc', ['date' => $date, 'num1' => 1]);
	$arr = select($link, 'diy_hc', "date=".$date);
}

?>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>xy - hc</title>
	
	<!-- Bootstrap -->
	<link href="/public/css/bootstrap.min.css" rel="stylesheet">
<style>
.ceng{
	font-size: 18px;
}
hr{
	margin-top: 4px;
	margin-bottom: 4px;
}
.red{color: red;}
</style>
	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="container main">
	<h1 class="text-center bg-primary lhei">动态更新</h1>
	
	<form action="naoz.php" method="post" name="frm">
<?php
for($i=1;$i<=20;$i++){
	$str_i = $i < 10 ? "0" . strval($i) : strval($i);
?>
		<span class="ceng"><?php echo $str_i;?>、</span>
		<input type="radio" name="num<?php echo $i;?>" id="<?php echo 'num'.$i."-1"?>" onchange="num_change(this.name, 1)"/>
		<input type="radio" name="num<?php echo $i;?>" id="<?php echo 'num'.$i."-2"?>" onchange="num_change(this.name, 2)"/>
		<input type="radio" name="num<?php echo $i;?>" id="<?php echo 'num'.$i."-3"?>" onchange="num_change(this.name, 3)"/>
		<input type="button" name="num<?php echo $i;?>" value="清除" onclick="num_change(this.name, 0)"/><br />
<?php
	if($i % 5 == 0){echo "<hr />";}
}
?>
	</form>
	<div>
		<p><span onclick="cp_text()">今</span>日答案：<span id="span_dian"></span></p>
		<p id="today_str"></p>
		<div style="top: 0;left: 0;opacity: 0;z-index: -999;height: 0px;"><textarea id="temp_text">这是幕后黑手</textarea></div>
		<p>最多显示 3 条匹配到的数据：</p>
		<p id="str1"></p>
		<p id="str2"></p>
		<p id="str3"></p>
	</div>
</div>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="/public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/public/js/footer.js"></script>
<script type="text/javascript">
	//复制p标签里面的文本
	function cp_text(){
		var input_text = document.getElementById('temp_text');
		input_text.select(); // 选中文本
		document.execCommand("copy"); // 执行浏览器复制命令
		// alert("p标签里面的文本复制好了");
		document.getElementById('span_dian').innerText = '.';
	}
	
	function num_change(id, value){
		if(value == 0){
			document.getElementById(id + '-1').checked = ''
			document.getElementById(id + '-2').checked = ''
			document.getElementById(id + '-3').checked = ''
		}
		// console.log(id)
		// console.log(value)
		$.ajax({
			url:'ajax_update.php',
			type:'post',
			data:'field=' + id + "&value=" + value,
			dataType:'json',
			success:function(obj){
				// console.log(obj)
			}
		});
	}
	
	function poll(){
		//最简单的ajax
		$.ajax({
		 	url:"ajax.php",
			type:"post",
			data:"ini="+1,
			dataType:"json",
			success:function(obj){
				// console.log(obj)
				var today_str = ''
				for(i in obj){
					// console.log(i)
					// console.log(obj[i])
					if(obj[i] >= 1){
						today_str += i.replace(/num/, '') + "-" + obj[i] + " "
					}
					var arr123 = ['1', '2', '3']
					if(arr123.indexOf(obj[i]) >= 0){
						document.getElementById(i + "-" + obj[i]).checked = 'checked'
					}else{
						document.getElementById(i + "-1").checked = ''
						document.getElementById(i + "-2").checked = ''
						document.getElementById(i + "-3").checked = ''
					}
				}
				// console.log(today_str)
				document.getElementById('today_str').innerText = today_str
				document.getElementById('temp_text').innerText = today_str
			}
		});
	}
	poll()
	setin = setInterval(poll, 1000);
	
	function show(){
		//最简单的ajax
		$.ajax({
		 	url:"ajax_get_list.php",
			type:"post",
			data:"ini="+1,
			dataType:"json",
			success:function(obj){
				// console.log(obj)
				document.getElementById('str1').innerText = '';
				document.getElementById('str2').innerText = '';
				document.getElementById('str3').innerText = '';
				for(i in obj){
					// console.log(i)
					// console.log(obj[i])
					str = obj[i].replace(/ /g, "</span>").replace(/-/g,"-<span class='red'>").replace(/<\/span>/g,"</span>&nbsp;&nbsp;")
					document.getElementById('str' + i).innerHTML = str
				}
			}
		});
	}
	show()
	setin_show = setInterval(show, 5000);
</script>
</html>